<template>
	<fui-top-popup :show="showPopup" :zIndex="9999" :radius="0" :maskClosable="true" @close="closePopupEvent">
		<view class="fui-custom__wrap">
			<fui-radio-group name="radio" v-model="radio.value" @change="changeRadio" v-if="inArray(keys,'radio')">
				<view class="fui-list__item">
					<fui-label v-for="(item,index) in radio.options" :key="index">
						<view class="fui-align__center" style="margin-right: 30rpx;">
							<fui-radio :value="index"></fui-radio>
							<text class="fui-text" style="margin-left: 10rpx;">{{item}}</text>
						</view>
					</fui-label>
				</view>
			</fui-radio-group>
			<fui-input v-if="inArray(keys,'title')" v-model="title" :inputBorder="true" placeholder="请输入停车场名称" :marginTop="16" :size="28" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'plate_number')" v-model="plate_number" :inputBorder="true" placeholder="请输入车牌号" :marginTop="16" :size="28" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'transaction_id')" v-model="transaction_id" :inputBorder="true" placeholder="请输入渠道流水号" :marginTop="16" :size="28" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'out_trade_no')" v-model="out_trade_no" :inputBorder="true" placeholder="请输入商户单号" :marginTop="16" :size="28" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'merch_name')" v-model="merch_name" :inputBorder="true" placeholder="请输入商户名称" :marginTop="16" :size="28" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'contact')" v-model="contact" :inputBorder="true" placeholder="请输入姓名" :size="28" :marginTop="16" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'mobile')" v-model="mobile" :inputBorder="true" placeholder="请输入手机号" :size="28" :marginTop="16" :padding="['16rpx','20rpx']"></fui-input>
			<fui-input v-if="inArray(keys,'starttime')" v-model="starttime" readonly :clearable="true" :inputBorder="true" placeholder="开始时间" :size="28" :padding="['10rpx','20rpx']" :marginTop="16">
				<fui-button @click="checkDate(1)" :margin="['0rpx','0rpx','0rpx','14rpx']" width="130rpx" height="60rpx" :size="24" text="选择时间"></fui-button>
			</fui-input>
			<fui-input v-if="inArray(keys,'endtime')" v-model="endtime" readonly :clearable="true" :inputBorder="true" placeholder="结束时间" :size="28" :padding="['10rpx','20rpx']" :marginTop="16">
				<fui-button @click="checkDate(2)" :margin="['0rpx','0rpx','0rpx','14rpx']" width="130rpx" height="60rpx" :size="24" text="选择时间"></fui-button>
			</fui-input>
			<view class="taginfo" v-if="inArray(keys,'starttime') && inArray(keys,'endtime')">
				<fui-tag @click="checkDate(3)" text="当日" theme="light" marginRight="20"></fui-tag>
				<fui-tag @click="checkDate(4)" text="本周" theme="light" marginRight="20"></fui-tag>
				<fui-tag @click="checkDate(5)" text="本月" theme="light" marginRight="20"></fui-tag>
				<fui-tag @click="checkDate(6)" text="上月" theme="light" marginRight="20"></fui-tag>
				<fui-tag @click="checkDate(7)" text="今年" theme="light" marginRight="20"></fui-tag>
				<fui-tag @click="checkDate(8)" text="最近7天" theme="light"></fui-tag>
				<fui-tag @click="checkDate(9)" text="最近30天" theme="light" marginTop="20"></fui-tag>
			</view>
			<view class="bottom">
				<fui-button @click="confirm" height="80rpx" :margin="['30rpx']">提交</fui-button>
				<fui-button v-if="showCancel" @click="cancel" height="80rpx" type="gray" :margin="['30rpx']">重置</fui-button>
			</view>
		</view>
	</fui-top-popup>
	<fui-date-picker :value="defaultDate" :zIndex="9999" :show="showDate!==false" type="3" @change="changeDate" @cancel="cancelDate"></fui-date-picker>
	<fui-fab v-if="showButton" @click="showPopup=true" :position="align" :bottom="30" width="70" distance="30">
		<fui-icon name="search" color="#fff" size="40"></fui-icon>
	</fui-fab>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {inArray,formatDate} from '@/utils/util.js'
	export default {
		name:'list-filter',
		emits: ['confirm'],
		data() {
			return {
				keys:[],
				title:'',
				plate_number:'',
				out_trade_no:'',
				merch_name:'',
				contact:'',
				mobile:'',
				starttime:'',
				endtime:'',
				radio:{},
				defaultDate:formatDate(new Date()),
				showDate:false,
				showPopup:false,
				showSelect:false
			}
		},
		props:{
			param:{
				type:Object,
				default:{}
			},
			align:{
				type:String,
				default:'right'
			},
			showCancel:{
				type:Boolean,
				default:true
			},
			showButton:{
				type:Boolean,
				default:true
			}
		},
		mounted(){
			this.init();
		},
		methods: {
			...methods,
			inArray,
			show:function(){
				this.showPopup=true;
			},
			init:function(){
				this.keys=Object.keys(this.param);
				for(let i=0;i<this.keys.length;i++){
					let key=this.keys[i];
					this[key]=this.param[key];
				}
				this.checkDate(3);
			},
			confirm:function(){
				let param={};
				for(let i=0;i<this.keys.length;i++){
					let key=this.keys[i];
					param[key]=this[key];
				}
				this.showPopup=false;
				this.$emit('confirm',param);
			},
			closePopupEvent:function(){
				this.showPopup=false;
				this.showDate=false;
			},
			checkDate:function(i){
				if(i<3){
					this.showDate=i;
				}
				if(i==3){
					let today = new Date();
					this.starttime=formatDate(today);
					this.endtime=formatDate(today);
				}
				if(i==4){
					let today = new Date();
					let dayOfWeek = today.getDay();
					let diff = today.getDate() - dayOfWeek + (dayOfWeek === 1 ? -6 : 1); 
					let startDate = new Date(today.setDate(diff));
					this.starttime=formatDate(startDate);
					this.endtime=formatDate(today);
				}
				if(i==5){
					let today = new Date();
					let year = today.getFullYear();
					let month = today.getMonth();
					let startDate = new Date(year, month, 1); 
					this.starttime=formatDate(startDate);
					this.endtime=formatDate(today);
				}
				if(i==6){
					let today = new Date();
					let year = today.getFullYear();
					let month = today.getMonth(); 
					let lastDay = new Date(year, month, 0);
					if (month === 0) { 
					    month = 11;
					    year -= 1;
					} else {
					    month -= 1;
					}
					let startDate = new Date(year, month, 1); 
					this.starttime=formatDate(startDate);
					this.endtime=formatDate(lastDay);
				}
				if(i==7){
					let today = new Date();
					let year = today.getFullYear();
					let month = today.getMonth(); 
					let startDate = new Date(year, 0, 1); 
					this.starttime=formatDate(startDate);
					this.endtime=formatDate(today);
				}
				if(i==8){
					let today = new Date();
					this.starttime=formatDate(new Date(today.getTime()-24*3600*1000*6));
					this.endtime=formatDate(today);
				}
				if(i==9){
					let today = new Date();
					this.starttime=formatDate(new Date(today.getTime()-24*3600*1000*29));
					this.endtime=formatDate(today);
				}
			},
			cancelDate:function(){
				this.showDate=false;
			},
			changeDate:function(e){
				if(this.showDate==1){
					this.starttime=e.result;
				}
				if(this.showDate==2){
					this.endtime=e.result;
				}
				this.showDate=false;
			},
			changeRadio:function(){
				
			},
			cancel:function(){
				this.showPopup=false;
				this.plate_number='';
				this.contact='';
				this.mobile='';
				this.starttime='';
				this.endtime='';
				this.$emit('confirm',{});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-custom__wrap{
		margin-top: 30rpx;
		padding: 20rpx 48rpx;
		padding-top: 0;
	}
	.taginfo{
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.fui-list__item{
		display: flex;
		margin: 20rpx 0;
		color:grey
	}
</style>